<template>
  <div class="component-style-tabs">
    <div class="prop-list" v-if="currentComProps && currentComProps.class">
      <p class="unit-tip">如涉及单位的属性，请填写对应的单位，不填不生效。</p>
      <div class="list u-f u-f-ac">
        <span class="text">唯一标识：</span>
        <a-input class="u-f1" readonly v-model:value="currentComProps.key" />
      </div>
      <div class="list u-f u-f-ac" v-show="handleShow(['input'])">
        <span class="text">输入框类型：</span>
        <a-input class="u-f1" v-model:value="currentComProps.class.type" />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f" v-show="handleShow(['text', 'button', 'input'])">
        <span class="text">文本内容：</span>
        <a-textarea
          class="a-textarea u-f1"
          v-model:value="currentComProps.class.text"
          allowClear
          placeholder="文本内容"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="handleShow(['image'])">
        <span class="text">图片地址：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.url"
          placeholder="仅支持网络图片"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac">
        <span class="text">是否隐藏：</span>
        <div class="u-f1">
          <a-switch v-model:checked="currentComProps.class.isHide" />
        </div>
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="handleShow(['input'])">
        <span class="text">是否必填：</span>
        <div class="u-f1">
          <a-switch v-model:checked="currentComProps.class.required" />
        </div>
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac">
        <span class="text">定位方式：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.position"
          placeholder="定位方式 position"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="currentComProps.class.position">
        <span class="text">左方位：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.left"
          placeholder="左方位"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="currentComProps.class.position">
        <span class="text">上方位：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.top"
          placeholder="上方位"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="currentComProps.class.position">
        <span class="text">右方位：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.right"
          placeholder="右方位"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="currentComProps.class.position">
        <span class="text">下方位：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.bottom"
          placeholder="下方位"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="currentComProps.class.position">
        <span class="text">定位层级：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.zIndex"
          placeholder="定位层级"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac">
        <span class="text">宽度：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.width"
          placeholder="宽度"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac">
        <span class="text">高度：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.height"
          placeholder="高度"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="handleShow(['text', 'input'])">
        <span class="text">对齐方式：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.textAlign"
          placeholder="对齐方式 text-align"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="handleShow(['image'])">
        <span class="text">对齐方式：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.verticalAlign"
          placeholder="对齐方式 vertical-align"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="handleShow(['text', 'input'])">
        <span class="text">行高：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.lineHeight"
          placeholder="行高 line-height"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="handleShow(['text', 'input', 'button', 'image'])"
      >
        <span class="text">显示：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.display"
          placeholder="显示方式 display"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <template v-if="handleShow(['flex-container'])">
        <div class="list u-f u-f-ac">
          <span class="text">主轴方向：</span>
          <a-input
            class="u-f1"
            v-model:value="currentComProps.class.flexDirection"
            placeholder="排列方向 flex-direction"
          />
          <GlobalOutlined class="a-icon" title="绑定动态数据" />
        </div>
        <div class="list u-f u-f-ac">
          <span class="text">align:对齐方式：</span>
          <a-input
            class="u-f1"
            v-model:value="currentComProps.class.alignItems"
            placeholder=" align-items"
          />
          <GlobalOutlined class="a-icon" title="绑定动态数据" />
        </div>
        <div class="list u-f u-f-ac">
          <span class="text">justify:对齐方式：</span>
          <a-input
            class="u-f1"
            v-model:value="currentComProps.class.justifyContent"
            placeholder=" justify-content"
          />
          <GlobalOutlined class="a-icon" title="绑定动态数据" />
        </div>
      </template>
      <template v-else>
        <div
          class="list u-f u-f-ac"
          v-show="
            currentComProps.class.display === 'flex' && handleShow(['text'])
          "
        >
          <span class="text">主轴方向：</span>
          <a-input
            class="u-f1"
            v-model:value="currentComProps.class.flexDirection"
            placeholder="排列方向 flex-direction"
          />
          <GlobalOutlined class="a-icon" title="绑定动态数据" />
        </div>
        <div
          class="list u-f u-f-ac"
          v-show="
            currentComProps.class.display === 'flex' && handleShow(['text'])
          "
        >
          <span class="text">align:对齐方式：</span>
          <a-input
            class="u-f1"
            v-model:value="currentComProps.class.alignItems"
            placeholder=" align-items"
          />
          <GlobalOutlined class="a-icon" title="绑定动态数据" />
        </div>
        <div
          class="list u-f u-f-ac"
          v-show="
            currentComProps.class.display === 'flex' && handleShow(['text'])
          "
        >
          <span class="text">justify:对齐方式：</span>
          <a-input
            class="u-f1"
            v-model:value="currentComProps.class.justifyContent"
            placeholder=" justify-content"
          />
          <GlobalOutlined class="a-icon" title="绑定动态数据" />
        </div>
      </template>
      <div class="list u-f u-f-ac">
        <span class="text">外边距：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.margin"
          placeholder="外边距 margin"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="handleShow(['text', 'button', 'input', 'flex-container'])"
      >
        <span class="text">内边距：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.padding"
          placeholder="内边距 padding"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac">
        <span class="text">边框：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.border"
          placeholder="边框 border"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="handleShow(['text'])">
        <span class="text">文本阴影：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.textShadow"
          placeholder="文本阴影 text-shadow"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac">
        <span class="text">阴影：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.boxShadow"
          placeholder="阴影 box-shadow"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac">
        <span class="text">圆角：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.borderRadius"
          placeholder="圆角"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="handleShow(['text', 'button', 'input', 'flex-container'])"
      >
        <span class="text">盒模型：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.boxSizing"
          placeholder="盒模型 box-sizing"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="handleShow(['text', 'button', 'input'])"
      >
        <span class="text">字体：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.fontFamily"
          placeholder="目前只支持系统自带的"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="handleShow(['text', 'button'])">
        <span class="text">字体样式：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.fontStyle"
          placeholder="字体样式 font-style"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="handleShow(['text', 'button', 'input'])"
      >
        <span class="text">字体大小：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.fontSize"
          placeholder="字体大小 font-size"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="handleShow(['text', 'button', 'input'])"
      >
        <span class="text">字体颜色：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.color"
          placeholder="字体颜色"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="handleShow(['text', 'button', 'input'])"
      >
        <span class="text">字体粗细：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.fontWeight"
          placeholder="字体粗细 font-weight"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac" v-show="handleShow(['text'])">
        <span class="text">字体修饰：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.textDecoration"
          placeholder="字体修饰 text-decoration"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div class="list u-f u-f-ac">
        <span class="text">透明度：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.opacity"
          placeholder="透明度"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="handleShow(['text', 'button', 'input', 'flex-container'])"
      >
        <span class="text">背景颜色：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.backgroundColor"
          placeholder="背景颜色"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="handleShow(['text', 'button', 'input', 'flex-container'])"
      >
        <span class="text">背景图片：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.backgroundImage"
          placeholder="背景图片地址"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="currentComProps.class.backgroundImage"
      >
        <span class="text">图片大小：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.backgroundSize"
          placeholder="背景图片大小 background-size"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
      <div
        class="list u-f u-f-ac"
        v-show="currentComProps.class.backgroundImage"
      >
        <span class="text">图片重复：</span>
        <a-input
          class="u-f1"
          v-model:value="currentComProps.class.backgroundRepeat"
          placeholder="如何重复背景图像 background-repeat"
        />
        <GlobalOutlined class="a-icon" title="绑定动态数据" />
      </div>
    </div>

    <div v-else class="nodata">未选择组件</div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useRoute } from 'vue-router'
import { GlobalOutlined } from '@ant-design/icons-vue'
import { BasicItem } from '@/assets/ts/basic-material/basic-components.type'
import { useAppMock } from '@/hooks/usePageJson'

export default defineComponent({
  name: 'ComponentStyle',
  components: {
    GlobalOutlined,
  },
  setup() {
    const route = useRoute()

    const { appInfo, currentPage, currentCom } = useAppMock(
      route.params.id as string
    )

    const currentComProps = computed(() => {
      const page = appInfo.pages.find((item) => {
        return item.key === currentPage.value
      })

      const components = page!.components as BasicItem[]

      const result = getBlock(components)

      return result
    })

    const getBlock = (components: BasicItem[]): BasicItem | undefined => {
      for (const item of components) {
        if (item.components) {
          if (item.key === currentCom.value) {
            return item
          } else {
            return getBlock(item.components)
          }
        } else {
          if (item.key === currentCom.value) {
            return item
          }
        }
      }
    }

    const handleShow = (arr: string[]) => {
      return arr.includes(currentComProps.value!.type)
    }

    return {
      currentComProps,
      handleShow,
    }
  },
})
</script>

<style lang="less" scoped>
.component-style-tabs {
  padding-bottom: 15px;
  .unit-tip {
    font-size: 14px;
    color: #ff4d4f;
    padding-left: 10px;
    margin-bottom: 10px;
  }
  .nodata {
    font-size: 14px;
    color: #878f95;
    text-align: center;
    padding-top: 50px;
  }
  .prop-list {
    padding-left: 10px;
    padding-right: 15px;
    .list {
      margin-bottom: 15px;
      .text {
        display: inline-block;
        min-width: 70px;
        font-size: 14px;
      }
      .a-textarea {
        min-height: 85px;
      }
      .a-icon {
        cursor: pointer;
        font-size: 18px;
        color: #878f95;
        margin-left: 10px;
      }
    }
  }
}
</style>

<style>
.component-style-tabs textarea::-webkit-scrollbar {
  display: none;
}
</style>